/* src/styles/index.scss - 全局样式文件 */

/* 全局样式变量 - 基于 test.html 的风格 */
:root {
  --primary-color: #0066ff;    /* 主色调 */
  --bg-color: #f5f7fa;         /* 背景色 */
  --sidebar-bg: #ffffff;        /* 侧边栏背景色 */
  --text-color: #333333;        /* 文字颜色 */
  --text-light: #666666;        /* 浅色文字 */
  --border-color: #eaeaea;      /* 边框颜色 */
  --hover-color: #f5f7fa;       /* 悬停背景色 */
  --shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06); /* 阴影效果 */
  --radius: 8px;                /* 圆角大小 */
}

/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 页面基础样式 */
html, body, #app {
  height: 100%;
  overflow: hidden;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  min-height: 100vh;
}

/* Element Plus 样式覆盖 */
:root {
  --el-color-primary: var(--primary-color); /* 覆盖Element Plus主色调 */
}

/* Element Plus按钮样式定制 */
.el-button--primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
  border-radius: 6px;
}

/* Element Plus菜单样式定制 */
.el-menu {
  border: none;
}

.el-menu-item {
  height: 50px !important;
  line-height: 50px !important;
  margin: 4px 0;
  border-radius: var(--radius) !important;
  font-size: 14px;
  overflow: hidden;
}

.el-menu-item:hover {
  background-color: var(--hover-color);
  border-radius: var(--radius);
}

.el-sub-menu__title {
  border-radius: var(--radius) !important;
  overflow: hidden;
}

.el-sub-menu__title:hover {
  background-color: var(--hover-color);
  border-radius: var(--radius);
}

.el-menu--popup .el-menu-item:hover {
  background-color: var(--hover-color);
  border-radius: var(--radius);
}

.el-menu--popup .el-sub-menu__title:hover {
  background-color: var(--hover-color);
  border-radius: var(--radius);
}

.el-menu-item.is-active {
  background-color: rgba(0, 102, 255, 0.1);
  color: var(--primary-color);
  font-weight: 500;
  border-radius: var(--radius);
}

/* Element Plus表格样式定制 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.el-table th {
  background-color: #fafafa;
  color: var(--text-color);
  font-weight: 600;
}

/* 表格操作栏固定样式 */
.el-table .el-table__fixed-right {
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

/* 操作按钮组样式 */
.action-buttons {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  min-width: 80px;
}

.action-buttons .el-button {
  padding: 4px 8px;
  min-width: 24px;
  height: 24px;
}

/* 输入框和选择器样式定制 */
.el-input__wrapper,
.el-select__wrapper,
.el-form-item .el-input__inner {
  border-radius: 6px;
}

/* 卡片样式 */
.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
}

/* 页面标题样式 */
.page-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-color);
}

/* 响应式设计 - 平板设备 */
@media (max-width: 992px) {
  .navbar {
    padding: 0 12px;
  }
  
  .breadcrumb {
    font-size: 14px;
  }
  
  .user-menu {
    gap: 8px;
  }
  
  .user-menu .el-icon-bell {
    margin-right: 8px !important;
  }
}

/* 响应式设计 - 手机设备 */
@media (max-width: 768px) {
  .navbar {
    padding: 0 8px;
  }
  
  .navbar-left {
    gap: 8px;
  }
  
  .breadcrumb {
    font-size: 12px;
    display: none;
  }
  
  .user-menu {
    gap: 4px;
  }
  
  .avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  
  .el-dropdown-link {
    font-size: 12px;
  }
  
  .app-main {
    padding: 12px;
  }
  
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .toolbar .el-input {
    width: 100% !important;
  }
  
  .page-title {
    font-size: 18px;
  }
  
  .card {
    padding: 12px;
  }
}